<template>
    <div>
        <Row>
            <Card>
                <Icon type="logo-usd"></Icon>
                提现列表
            </Card>
            <Card>
                <div>
                    <Input v-model="searchObj.id" placeholder="请输入编号..." class="searchItem"/>
                    <Input v-model="searchObj.accountName" placeholder="请输入开户行姓名..." class="searchItem"/>
                    <Input v-model="searchObj.bankNumber" placeholder="请输入银行卡号..." class="searchItem"/>
                    <Select v-model="searchObj.status" placeholder="请选择状态" class="searchItem">
                      <Option :value="1">处理中</Option>
                      <Option :value="2">已取消</Option>
                      <Option :value="3">已完成</Option>
                    </Select>
                    <Button type="primary" style="" class="searchButton" icon="search" @click="search()">搜索</Button>
                    <Button @click="cancel">取消</Button>
                </div>
                <div class="edittable-con-1 list" style="">
                    <!--<can-edit-table refs="table1" @on-delete="handleDel" v-model="userList"-->
                    <!--:columns-list="userColumns"></can-edit-table>-->
                    <Table border ref="selection" :columns="cashColumns" :data="cashList"></Table>
                </div>
                <div style="text-align: center;margin-top: 20px">
                    <Page :current="pageId" :total="totalPage" :page-size="10" @on-change='search'></Page>
                </div>
            </Card>
        </Row>
    </div>
</template>

<script>
import  { getCashList, audit } from '@/api/cash'

export default {
  name: 'cash-list',
  data () {
    return {
      searchObj: {
        id: '',
        accountName: '',
        bankNumber: '',
        status: '',
        pageId: 1
      },
      cashColumns: [
        {
          title: '编号',
          align: 'center',
          key: 'id',
          width: 100
        },
        {
          title: '开户行姓名',
          align: 'center',
          key: 'accountName',
          width: 120
        },
        {
          title: '开户行',
          align: 'center',
          key: 'bank',
          width: 120
        },
        {
          title: '银行卡号',
          align: 'center',
          key: 'bankNumber',
          width: 150
        },
        {
          title: '提现金额',
          align: 'center',
          key: 'amount',
          width: 100
        },
        {
          title: '实际到账金额',
          align: 'center',
          key: 'actualAmount',
          width: 100
        },
        {
          title: '提现费用',
          align: 'center',
          key: 'feeAmount',
          width: 100
        },
        {
          title: '创建时间',
          align: 'center',
          key: 'createTime',
          width: 180
        },
        // {
        //   title: '更新时间',
        //   align: 'center',
        //   key: 'updateTime',
        //   width: 180
        // },
        {
          title: '状态',
          align: 'center',
          render: (h, params) => {
            switch (params.row.status) {
              case 1:
                return h('Tag', {
                  props: {
                    color: 'primary'
                  }
                }, '处理中');
                break
              case 2:
                return h('Tag', {
                  props: {
                    color: 'error'
                  }
                }, '已取消');
                break
              case 3:
                return h('Tag', {
                  props: {
                    color: 'success'
                  }
                }, '已完成');
                break
            }
          }
        },
        {
          title: '操作',
          align: 'center',
          key: 'handle',
          render: (h, params) => {
            if (params.row.status === 1) {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '10px'
                  },
                  on: {
                    click: () => {
                      this.setStatus(params.row.id, 3);
                    }
                  }
                }, '同意'),
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.setStatus(params.row.id, 2);
                    }
                  }
                }, '拒绝')
              ]);
            } else {
              return h('Tag', {
                props: {
                  color: 'gray'
                }
              }, '无法操作');
            }
          }
        }
      ],
      cashList: [],
      pageId: 1,
      totalPage: 10
    }
  },
  methods: {
    getList () {
      getCashList(this.searchObj).then(data => {
        this.cashList = data.data.map( item => {
          item.amount = parseFloat(item.actualAmount) + parseFloat(item.feeAmount);
          return item
        })
        this.pageId = data.current_page
        this.totalPage = data.total
      })
    },
    goDetail (id) {
      this.$router.push({
        name: 'cash_detail',
        query: {
          id: id
        }
      })
    },
    search () {
      if (arguments[0]) {
        this.searchObj.pageId = arguments[0]
      }
      this.getList()
    },
    cancel () {
      this.searchObj = {
        id: '',
        accountName: '',
        bankNumber: '',
        status: '',
        pageId: 1
      },
      this.getList()
    },
    setStatus (id, status) {
      audit({id:id, status: status}).then(() => {
        this.getList()
      })
    }
  },
  mounted () {
    this.getList()
  }
}
</script>

<style scoped>

</style>
